<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>简易日历</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .outer {
            width: 250px;
            padding: 10px 0 10px 10px;
            background: #eaeaea;
            margin: 10px auto;
        }

        ul {
            display: inline-block;
            list-style: none;
        }

        li {
            color: #fff;
            font-size: 14px;
            width: 40px;
            height: 40px;
            padding: 5px;
            border: 1px solid #000;
            margin: 10px 10px 0 0;
            background: #000;
            float: left;
            cursor: pointer;
            text-align: center;
        }

        li strong {
            font-size: 18px;
            display: block;
        }

        #msg {
            border: 1px solid #fff;
            margin: 20px 10px 0 0;
            padding: 5px;
            color: #666;
            background: #f1f1f1;
            font-size: 12px;

        }

        #msg h2 {
            font-size: 16px;
        }

        .outer li.current {
            color: #f69;
            background: #fff;
        }
    </style>
    <script>
        window.onload = function () {
            var oLi = document.getElementsByTagName("li");
            var oMsg = document.getElementById("msg");
            var oP = oMsg.getElementsByTagName("p")[0];
            var oStrong = oMsg.getElementsByTagName("strong")[0];
            var oArray = [
                "元旦：1月1日至3日放假三天。",
                "春节：2月2日至8日放假7天。",
                "妇女节：3月8日妇女节，与我无关。",
                "清明节：4月3日至5日放假3天",
                "劳动节：4月30日至5月2日放假3天。",
                "端午节：6月4日至6日放假3天。",
                "小暑：7月7日小暑。不放假。",
                "七夕节：8月6日七夕节。不放假。",
                "中秋节：9月10日至12日放假3天。",
                "国庆节：10月1日至7日放假7天。",
                "立冬：11月8日立冬。不放假。",
                "艾滋病日:12月1日<br />废除奴隶制国际日:12月2日。"
            ];

            console.log(oLi);
            for (var i=0; i<oLi.length; i++){
                oLi[i].index = i;
                oLi[i].onclick = function(){
                    for (var j=0; j<oLi.length; j++){
                        oLi[j].className = "";
                    }
                    this.className = "current";

                    oStrong.innerHTML = this.index+1;
                    oP.innerHTML = oArray[this.index];
                }
            }

        }
    </script>
</head>

<body>
    <div class="outer">
        <ul>
            <li class=""><strong>1</strong>JAN</li>
            <li class=""><strong>2</strong>FER</li>
            <li class=""><strong>3</strong>MAR</li>
            <li class=""><strong>4</strong>APR</li>
            <li class=""><strong>5</strong>MAY</li>
            <li class=""><strong>6</strong>JUN</li>
            <li class=""><strong>7</strong>JUL</li>
            <li class=""><strong>8</strong>AUG</li>
            <li class="current"><strong>9</strong>SEP</li>
            <li class=""><strong>10</strong>OCT</li>
            <li class=""><strong>11</strong>NOV</li>
            <li class=""><strong>12</strong>DEC</li>
        </ul>
        <div id="msg">
            <h2>
                <strong>9</strong>
                月节日
            </h2>
            <p>中秋节：9月10日至12日放假3天。</p>
        </div>
    </div>
</body>

</html>